<template>
  <el-dialog
    :title="state.title"
    v-model="state.visible"
    @close="handleClose"
  >
    <el-form :model="state.info" ref="refForm" label-width="140px" class="good-form">
      <el-form-item label="图片" prop="image">
        <el-upload multiple
          class="avatar-uploader"
          :action="uploadServer"
          accept="image/*"
          :headers="{ Authorization: local.get('ADMIN.TOKEN') }"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="handleUrlSuccess">
          <img v-if="state.info.image" :src="state.info.image"
            class="avatar" width="260" height="160"
            style="border: 1px solid #e9e9e9;" alt="">
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="排序值" prop="orderby">
        <el-input type="number" v-model="state.info.orderby"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { uploadServer } from '../utils'
import crud from '../utils/crud'
import { local } from '../utils/storage'
import { AdminBannerInfo, AdminBannerPost } from "../api/server/banner";

const props = defineProps({
  reload: Function
})

const state = reactive({
  visible: false,
  title: '添加',
  info: {
    type: 1,
    image: '',
    orderby: 0,
  },

})

// 获取详情
const getDetail = async (id) => {
  const { data: { info } } = await AdminBannerInfo(id)
  state.info = info
}
const handleBeforeUpload = (file) => {
  const suffix = file.name.split('.').at(-1) || ''
  if (!['jpg', 'jpeg', 'png'].includes(suffix)) {
    ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
    return false
  }
}

// 上传图片
const handleUrlSuccess = ({ code, data }, file) => {
  if (code === 200 && data) {
    state.info.image = data || ''
    return false
  }
  ElMessage.error('上传失败')
}

// 开启弹窗
const open = (id) => {
  state.title = id ? '编辑' : '添加'
  state.visible = true
  if (id) {
    getDetail(id)
  } else {
    state.info = { image: '', type: 1, orderby: 0 }
  }
}
// 关闭弹窗
const close = () => state.visible = false

const refForm = ref(null)
const handleClose = () => refForm.value.resetFields()
const submit = async () => {
  await crud.update(AdminBannerPost, state.info, async () => {
    state.visible = false
    await props.reload()
  })
}

defineExpose({ open })
</script>

<style scoped>

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.el-icon.avatar-uploader-icon ) {
  font-size: 28px;
  color: #8c939d;
  width: 260px;
  height: 160px;
  text-align: center;
}
</style>
